Виджеты. Text Image Icon

➡️Скачать презентацию. Flutter Text Image Icon
➡️Скачать шпаргалку
➡️Ссылка на репозиторий с кодом этого урока

Виджеты для работы с текстом

Для начала сделаем в проекте рефакторинг файлов и папок

• В папке rolls будут все виджеты для приложения с роллами
• В папке widgets будут примеры виджетов для изучения
• В файле main.dart будет  функция main и виджет MyApp

Файл main.dart

import 'package:course_2025/rolls/home_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Hello Flutter App",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: HomeWidget(),
    );
  }
}
                  

Файл home_widget.dart

import 'package:course_2025/rolls/roll_card.dart';
import 'package:flutter/material.dart';

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text("Container")),
      body: Center(
        child: Container(
          height: 250,
          decoration: BoxDecoration(color: Color.fromARGB(139, 33, 149, 246)),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            // crossAxisAlignment: CrossAxisAlignment.center, // по центру у поперечной оси
            // crossAxisAlignment: CrossAxisAlignment.start, // в начале поперечной оси
            // crossAxisAlignment: CrossAxisAlignment.end, // в конце у поперечной оси
            crossAxisAlignment: CrossAxisAlignment.stretch, // растянуть элементы
            children: [
              RollCard(),
              RollCard(height: 250), // 👉 Виджет будет выше
              RollCard(),
            ],
          ),
        ),
      ),
    );
  }
}
                  

Файл roll_card.dart

import 'package:flutter/material.dart';

/// Виджет Карточка товара
/// Товар Роллы содержит картинку, описание и кнопку купить
class RollCard extends StatelessWidget {
  final double height; // 👉 Виджет принимает знчение высоты
  const RollCard({super.key, this.height = 200});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height, // 👉 Используем высоту через параметр
      padding: const EdgeInsets.all(8),

      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.black),
        borderRadius: BorderRadius.circular(16),
      ),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/images/roll.png", width: 100),
          SizedBox(height: 10),
          Text("Вкусные Роллы", style: TextStyle(fontSize: 12)),
          ElevatedButton(onPressed: () {}, child: Text("Купить")),
        ],
      ),
    );
  }
}